import React from 'react';
import { Modal, Form, Spin, Input, Select, Tree, DatePicker, TreeSelect, message } from 'antd';
import moment from 'moment'

const { Option } = Select;
const { TreeNode } = Tree;
import defaultSettings from '../../../../config/defaultSettings'

@Form.create()
class SelectModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateTime: '',
      selectedRowKeys: [],
      currSystemId: '',
      currNodeName: ''
    };
  }

  componentDidMount(){
    const { systemNameList } =this.props;
    this.setState({
        currSystemId: (defaultSettings.systemId&&defaultSettings.systemId!='')?defaultSettings.systemId: (systemNameList? systemNameList[0].systemId : ''),
    })
  }

  handleOk = e => {
    const { onOk } = this.props;
    if(this.state.currNodeName==''){
        message.error('请选择一个机构！')
    }else{
        onOk(this.state.currNodeName)
    }
  };

  handleCancel = e => {
    const { onCancel } = this.props;
    onCancel();
  };

  //系统名称修改
  systemIdChange = value => {
    this.setState({
      currSystemId: value,
    },()=>{
      this.props.loadDept(value)
    });
  };

  selectNodes = (selectedKeys, e) => {
      this.setState({
        currNodeName: e.node.props.name
      })
  }

  renderTreeNodes = data =>
    data.map(item => {
      if (item.children) {
        return (
          <TreeNode title={item.title} key={item.key} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.key} {...item} dataRef={item} />;
    });

  render() {
    const { form, loading, systemNameList, orgList, onLoad, ...selectModalProps } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    
    return (
      <Modal {...selectModalProps} onOk={this.handleOk} onCancel={this.handleCancel}>
        <Spin spinning={loading}>
            <div style={{maxHeight: '700px',overflow:'auto'}}>
                <Form style={{ paddingRight: '20px' }} name="loginName" {...formItemLayout}>
                    {
                        (!defaultSettings.systemId||defaultSettings.systemId=='')&&
                        <Form.Item name="systemId" label="系统名称">
                            <Select
                            style={{ width: 200 }}
                            placeholder="请选择系统名称"
                            onChange={this.systemIdChange}
                            value={this.state.currSystemId}
                            >
                            {
                                systemNameList.map(item=>{
                                return(<Option value={item.systemId.toString()}>{item.systemName}</Option>)
                                })
                            }
                            </Select>
                        </Form.Item>
                    }
                </Form>
                <Tree loadData={onLoad} onSelect={this.selectNodes}>{this.renderTreeNodes(orgList)}</Tree>
            </div>
        </Spin>
      </Modal>
    );
  }
}

export default SelectModal;
